<template>
    <div>
        <Header></Header>
        <div class="main">
            <div class="content">
                <div class="banner">
                    <img style="width: 100%" src="https://img.js.design/assets/img/617766b867e5da8dd2a409b5.png" alt="">
                </div>
            </div>
            <div class="breadcrumb">
                <el-breadcrumb :separator-icon="'ArrowRightBold'">
                    <el-breadcrumb-item class="link" @click="$router.push({name:'index'})">首页</el-breadcrumb-item>
                    <el-breadcrumb-item class="link" @click="toInfoMation(activeName)">{{activeName}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{InformationMessage.title}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div>
                <p class="title">{{InformationMessage.title}}</p>
                <div style="margin-top: 30px" v-html="InformationMessage.content"></div>
            </div>
        </div>
        <staticFooter></staticFooter>
    </div>
</template>

<script>
    import staticFooter from "../../../../components/staticFooter";
    import {reactive,toRefs} from 'vue'
    import {useRoute, useRouter} from 'vue-router'
    import Header from "../../../../components/Header";
    import {basicInformationMessage} from "@/api/api";
    export default {
        name: "index",
        setup(){
            let router = useRouter();
            let route = useRoute();
            let data = reactive({
                n_id:'',
                activeName:'',
                InformationMessage:{}
            })

            let {n_id,activeName} = route.params;
            data.n_id = n_id;
            let activeName_map = {'pressCenter':'新闻中心','courseNotice':'课程公告'}
            data.activeName = activeName_map[activeName];

            let getBasicInformationMessage = () =>{
                basicInformationMessage({id:n_id}).then(res =>{
                    console.log('咨讯详情信息',res)
                    data.InformationMessage = res.data
                })
            }
            getBasicInformationMessage();

            let toInfoMation = (activeName) =>{
                console.log(123,activeName)
                router.push({name:'MoreInfoMation',params:{activeName:activeName}})
            }

            return{
                toInfoMation,
                ...toRefs(data)
            }
        },
        components:{
            Header,
            staticFooter
        }
    }
</script>

<style scoped>
    .link{
        cursor: pointer;
    }
    .link :hover{
        color: #409eff;
    }
.main{
    width: 1200px;
    margin: 0 auto;
    min-height: 80vh;
}
.banner{
    width: 100%;
    height: 15rem;
    position: relative;
    overflow: hidden;
}
.title{
    color: rgba(51, 51, 51, 1);
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    padding: 30px;
    border-bottom: 1px solid  rgba(234, 234, 234, 1);
}
.banner > img {
    position: absolute;
    top: -100%;

}
.breadcrumb{
    height: 40px;
    display: flex;
    align-items: center;
}
</style>
